<template>
	<view>
		<!-- 上门 -->
		<uni-popup ref="visitPoPup" type="center" :animation="false">
			<view class="mypopup">
				<view class="mypopup__head">
					<image src="../../static/img/icon-clock.png"></image>
					<text>上门</text>
				</view>
				<view class="mypopup__body">
					<view class="ag-cellgroup">
						<view class="ag-cell">
							<view class="ag-cell__label">
								<image mode="widthFix" src="../../static/img/icon-user.png" />
							</view>
							<view class="ag-cell__value">
								<text>{{orderDetailData.ContactName}}</text>
							</view>
						</view>
						<view class="ag-cell">
							<view class="ag-cell__label">
								<image mode="widthFix" src="../../static/img/icon-phone.png" />
							</view>
							<view class="ag-cell__value">
								<text class="ag-color-primary">{{orderDetailData.ContactMobile}}</text>
								<text class="ag-color-primary"></text>
							</view>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<image mode="widthFix" src="../../static/img/icon-location.png" />
						</view>
						<view class="ag-cell__value">
							<text>{{orderDetailData.DisplayAdress}}</text>
						</view>
					</view>
					<view class="ag-divider"></view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<image mode="widthFix" src="../../static/img/icon-location.png" />
						</view>
						<view class="ag-cell__value">
							<text>{{orderVisitData.Location}}</text>
						</view>
						<view class="ag-status-tag primary" v-if="orderVisitData&&orderVisitData.Location">
							<text>定位成功</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>上门时间：{{currentTime}}</text>
						</view>
					</view>
					<view class="ag-cell" style="margin-top: 30rpx;">
						<view class="ag-cell__label">
							<text>更正地址：</text>
						</view>
						<view class="ag-cell__value">
							<AGInput customStyle="margin-top:-12rpx;" placeholder="更正地址" :value="orderDetailData.Street" @change="ChangeStreet" />
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>上门里程：</text>
						</view>
						<view class="ag-cell__value">
							<AGInput customStyle="margin-top:-12rpx;" placeholder="上门里程(公里)" :value="milestone" @change="ChangeMilestone" />
						</view>
					</view>
					
					<AGInput textarea placeholder="备注" @change="ChangeVitisRemark" />
					<view class="mypopup__footer">
						<button class="cu-btn lg primary" @click="onVisit">确定</button>
						<button class="cu-btn lg primary plain" @click="closePoPup">取消</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup';
	import Utils from '../../common/utils';
	import AGInput from '../AGInput/index.vue'
	export default {
		props: {
			orderDetailData: {
				type: Object,
				default () {
					return {

					}
				}
			},
			orderVisitData: {
				type: Object,
				default () {
					return {
						Milestone: 0,
						Location: "",
						currentLongitude: 0,
						currentLatitude: 0,
						accountLongitude: 0,
						accountLatitude: 0
					}
				}
			}
		},
		components: {
			AGInput,
			uniPopup
		},
		data() {
			return {
				milestone: 0,
				street: '',
				vitisRemark: '',
				currentTime: Utils.formatDate(new Date(), "yyyy-MM-dd hh:mm:ss"),
			}
		},
		watch: {
			//监视经纬度计算公里
			'orderVisitData.accountLongitude': {
				handler(newval, oldval) {
					if (newval != oldval){
						if(newval){
							this.calcMapDistance();
						}else{
							this.milestone =0;
						}
					}
				},
				immediate: true,
			}
		},
		mounted:function(){
			
		},
		updated: function() {
			
		},
		methods: {
			ChangeStreet(e){
				//debugger;
				this.$emit("changeStreet",e);
			},
			ChangeVitisRemark(e) {
				this.vitisRemark = e;
				this.$emit("changeVitisRemark",e);
			},
			ChangeMilestone(e){
				this.$emit("changeMilestone",e);
			},
			//上门
			onVisit() {
				this.$emit("onVisit", { vitisRemark: this.vitisRemark });
			},
			
			openPoPup() {
				console.log(this.orderVisitData);
				//this.calcMapDistance();
				this.$refs.visitPoPup.open();

			},
			closePoPup() {
				this.$refs.visitPoPup.close();
			},

			//根据经纬度计算距离
			// async calcMapDistance() {
			// 	let form = new Array(this.orderVisitData.currentLatitude, this.orderVisitData.currentLongitude);
			// 	let to = new Array(this.orderVisitData.accountLatitude, this.orderVisitData.accountLongitude);
			// 	let params = {
			// 		mode: "driving",
			// 		from: form.toString(),
			// 		to: to.toString(),
			// 	};
			// 	let {
			// 		status,
			// 		result
			// 	} = await this.mapApiService.geoMultipParamMapAsync(this.qqMapServiceUrl, "/ws/distance/v1", params);

			// 	if (status == 0) {
			// 		//距离-米
			// 		let distance = result.elements[0].distance;	
			// 		this.milestone = distance / 1000;
			// 		this.$emit("changeMilestone",this.milestone);
			// 		// console.log(this.milestone)
			// 	}
			// },
			
			calcMapDistance() {
				let form = new Array(this.orderVisitData.currentLatitude, this.orderVisitData.currentLongitude);
				let to = new Array(this.orderVisitData.accountLatitude, this.orderVisitData.accountLongitude);
				let params = {
					mode: "driving",
					from: form.toString(),
					to: to.toString(),
				};
				this.mapApiService.geoMultipParamMapAsync(this.qqMapServiceUrl, 
				"/ws/distance/v1", params).then((success)=>{
					let {status, result} = success;
					if (status == 0) {
						//距离-米
						let distance = result.elements[0].distance;
						this.milestone = distance / 1000;
						this.$emit("changeMilestone",this.milestone);
						// console.log(this.milestone)
					}
				});
			
			
			},
		}
	}
</script>

<style lang="scss">
	
</style>
